<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spacing.js</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script src="./dist/bundle.js" defer></script>
  </head>
  <body class="bg-gray-50">
    <div class="container mx-auto max-w-4xl p-4">
      <h1
        class="
          text-center text-5xl
          sm:text-9xl
          font-bold
          tracking-tight
          mt-24
          mb-12
          sm:mt-32 sm:mb-14
        "
      >
        Spacing.js
      </h1>
      <p class="text-center text-lg sm:text-2xl max-w-lg mx-auto text-gray-400">
        A JavaScript utility for measuring the spacing between elements on
        webpage
      </p>

      <h2 class="text-center text-3xl font-bold mt-24 mb-12">How to use</h2>
      <div class="flex">
        <div class="w-full bg-white p-8 rounded-md shadow-md text-center">
          <span
            class="
              bg-black
              rounded-full
              flex
              justify-center
              items-center
              w-8
              h-8
              text-white text-xl
              font-bold
              mx-auto
              mb-6
            "
            >1</span
          >
          Include
          <div
            class="font-mono text-sm bg-gray-100 p-2 rounded my-2 overflow-auto"
          >
            &lt;script src=&quot;https://unpkg.com/spacingjs&quot;
            defer&gt;&lt;/script&gt;
          </div>
          in your HTML page.
        </div>
      </div>
      <div class="flex gap-6 flex-wrap mt-6">
        <div
          class="w-full md:flex-1 bg-white p-8 rounded-md shadow-md text-center"
        >
          <span
            class="
              bg-black
              rounded-full
              flex
              justify-center
              items-center
              w-8
              h-8
              text-white text-xl
              font-bold
              mx-auto
              mb-6
            "
            >2</span
          >
          Move your cursor to an element and press
          <kbd
            class="
              bg-gray-200
              py-1
              px-2
              text-md
              rounded
              border-b-4 border-gray-300
            "
            >Alt</kbd
          >
          on Windows, or
          <kbd
            class="
              bg-gray-200
              py-1
              px-2
              text-md
              rounded
              border-b-4 border-gray-300
            "
            >Option</kbd
          >
          on a Mac.
        </div>
        <div
          class="w-full md:flex-1 bg-white p-8 rounded-md shadow-md text-center"
        >
          <span
            class="
              bg-black
              rounded-full
              flex
              justify-center
              items-center
              w-8
              h-8
              text-white text-xl
              font-bold
              mx-auto
              mb-6
            "
            >3</span
          >
          Move your cursor to another element, the measurement results will be
          there.
        </div>
      </div>
      <p class="text-center my-12">
        By the way, you can press
        <kbd
          class="
            bg-gray-200
            py-1
            px-2
            text-md
            rounded
            border-b-4 border-gray-300
          "
          >Alt</kbd
        >
        /
        <kbd
          class="
            bg-gray-200
            py-1
            px-2
            text-md
            rounded
            border-b-4 border-gray-300
          "
          >Option</kbd
        >
        now.
      </p>

      <footer class="text-center py-8 mt-8">
        <a
          href="https://youtube.com/codingstartup"
          class="
            text-indigo-600
            mt-4
            border-b-4 border-indigo-400 border-opacity-25
            hover:border-opacity-100
            inline-block
            mr-2
          "
          >CodingStartup</a
        >
        <span class="text-gray-200 text-sm">|</span>
        <a
          href="https://github.com/stevenlei/spacingjs"
          class="
            text-indigo-600
            mt-4
            border-b-4 border-indigo-400 border-opacity-25
            hover:border-opacity-100
            inline-block
            ml-2
          "
          >GitHub</a
        >

        <div class="mt-4 text-sm">Made with ❤️ in Macao</div>
      </footer>
    </div>
  </body>
</html>
